<template>
	<div class="data-records">
		<div class="shade"></div>
		<div class="popup">
			<div class="title justify-content-between">
				<span class="fs28 colorFFF">数据记录</span>
				<img src="../assets/images/icon-close.png" @click="cancel(2)">
			</div>
            <div class="content">
                <div class="add-list-box">
                    <img src="../assets/images/icon-add-blue.png" class="add-list" @click="addListData">
                </div>
                <div class="theader justify-content-between">
                    <div class="w800">序号</div>
                    <div class="w3800">具体测试</div>
                    <div class="w2800">单位</div>
                    <div class="w800">修改</div>
                    <div class="w800">删除</div>
                </div>
                <div class="tbodys">
                    <div class="tbody justify-content-between" v-for="(item, index) in listData">
                        <div class="w800">{{index+1}}</div>
                        <div class="w3800">
                            <el-input v-model="item.dataItem" v-if="item.editing" placeholder="请输入具体测试"></el-input>
                            <div v-else>{{item.dataItem}}</div>
                        </div>
                        <div class="w2800">
                            <el-input v-model="item.dataUnit" v-if="item.editing" placeholder="请输入单位"></el-input>
                            <div v-else>{{item.dataUnit}}</div>
                        </div>
                        <div class="w800 justify-content-center">
                            <img src="../assets/images/icon-edit-gray.png" class="edit" @click="dataCanEdit(index)">
                        </div>
                        <div class="w800 justify-content-center">
                            <img src="../assets/images/icon-del-small-gray.png" class="del" @click="listDel(index)">
                        </div>
                    </div>
                </div>
            </div>
            <div class="btns justify-content-center">
                <div class="btn sure" @click="cancel(1)">确认</div>
                <div class="btn cancel" @click="cancel(2)">取消</div>
            </div>
		</div>
	</div>
</template>

<script>
export default {
    name: 'DataRecords',
    props: {
        data: Object //数据记录数据
    },
    data () {
        return {
        	listData: []
        }
    },
    created() {
        this.listData = this.data.itemList ? JSON.parse(JSON.stringify(this.data.itemList)) : [];
        this.listData.map(item => {
        	item.editing = false;
        	return item;
        })
    },
    methods: {
    	/**
    	 * 关闭弹窗
    	 * @param {Number} isSave - 是否保存数据
    	 */
    	cancel(isSave) {
    		this.$emit('cancel', isSave, this.listData);
    	},
    	/**
    	 * 编辑数据记录
    	 * @param {Number} index - 编辑数据下标
    	 */
    	dataCanEdit(index) {
    		let temp = this.listData[index];
    		temp.editing = true;
    		this.$set(this.listData, index, temp);
    	},
    	// 新增数据记录
    	addListData() {
    		let item = {
    			dataItem: '',
            	dataUnit: '',
            	editing: true
    		};
    		this.listData.push(item);
    	},
    	/**
    	 * 删除数据记录
    	 * @param {Number} index - 删除数据下标
    	 */
    	listDel(index) {
    		this.listData.splice(index, 1);
    	}
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .data-records {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
    	.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);}
		.popup {width: 828rem;height: 499rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #FFF;box-shadow: 0 5rem 15rem 0 rgba(0, 21, 54, 0.25);
			.title {width: 100%;height: 58rem;background-color: #285FE3;padding: 0 25rem 0 40rem;
				img {width: 23rem;height: 23rem;cursor: pointer;}
			}
            .content {width: 100%;padding: 14rem 40rem 0;
                .theader {width: 100%;height: 36rem;background: #F4F5F8;border: 1px solid #D0D6E3;border-radius: 3rem;padding: 0 30rem 0 15rem;margin-top: 7rem;
                    .triangle {width: 0;height: 0;border-top: 8rem solid #505971;border-left: 8rem solid transparent;border-right: 8rem solid transparent;margin-left: 5rem;}
                }
                .theader > div {text-align: center;font-size: 18rem;color: #505971;}
                .tbodys {width: 100%;max-height: 225rem;overflow-y: scroll;}
                .tbodys::-webkit-scrollbar {display: none;}
                .tbodys {scrollbar-width: none;-ms-overflow-style: none;overflow-x: hidden;overflow-y: auto;}
                .tbody {width: 100%;min-height: 42rem;border: 1px solid #D0D6E3;border-radius: 3rem;font-size: 18rem;color: #161D2E;margin-top: 3rem;padding: 0 30rem 0 15rem;
					.edit {width: 25rem;height: 30rem;cursor: pointer;}
					.del {width: 27rem;height: 30rem;cursor: pointer;}
                }
                .add-list-box {width: 100%;display: flex;align-items: center;justify-content: flex-end;}
                .add-list {width: 36rem;height: 36rem;cursor: pointer;margin-top: 3rem;}
                .w800 {width: 8%;text-align: center;}
                .w3800 {width: 38%;text-align: center;}
                .w2800 {width: 28%;text-align: center;}
            }
            .btns {width: 100%;position: absolute;bottom: 34rem;
                .btn {width: 130rem;height: 40rem;margin-left: 112rem;line-height: 40rem;text-align: center;border-radius: 3rem;font-size: 22rem;cursor: pointer;}
                .btn.sure {background: linear-gradient(0deg, #00A366 0%, #00C37A 100%);color: #FFF;}
                .btn.cancel {border: 1px solid #316EFF;background: linear-gradient(0deg, #D9DDE8 0%, #FFFFFF 100%);color: #505971;}
                .btn:first-child {margin-left: 0;}
            }
		}
	}
</style>